<template>
  <div>
    <a-modal
      :ok-text="confirmLoading ? '压缩中' : '确认'"
      cancel-text="取消"
      :maskClosable="false"
      title="批量下载二维码"
      @cancel="handleClose"
      :destroyOnClose="true"
      @ok="handleOk"
      :width="modalWidth"
      :visible="visible"
      :confirmLoading="confirmLoading"
      footer=""
    >
      <template>
        <div class="modalBut">
          <a-button @click="handleClose">
            取消
          </a-button>
          <a-button @click="handleOk" type="primary">{{
            confirmLoading ? "压缩中" : "确认"
          }}</a-button>
        </div>
      </template>
      <div class="flex flex-a-c  flex-wrap ">
        <div
          :id="'meQrcode' + index"
          v-for="(item, index) in tableData"
          :key="index"
          class="code"
        >
          <vue-qr
            :text="item.text"
            :size="200"
            :margin="0"
            colorDark="black"
            colorLight="white"
          ></vue-qr>
          <div class="labelBox">{{ item.label }}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import VueQr from "vue-qr";
import { batchExportQRCode } from "@/unit/code";
export default {
  components: { VueQr },
  props: {},
  data() {
    return {
      QRCodeURL: [], //存放生成的二维码图片地址
      tableData: [],
      zipNmae: "", // 压缩包名
      visible: false,
      confirmLoading: false,
      modalWidth: 1380,
    };
  },

  methods: {
    showModal() {
      this.visible = true;
    },
    // 关闭
    handleClose() {
      this.visible = false;
      this.QRCodeURL = [];
      this.tableData = [];
      this.zipNmae = "";
      this.visible = false;
      this.confirmLoading = false;
    },
    batchExportQRCode,
    // 生成二维码
    async handleOk() {
      this.confirmLoading = true;
      const that = this;
      if (!this.tableData.length) return;
      this.$nextTick(() => {
        this.tableData.forEach(async (item, index) => {
          var shareContent = await document.getElementById(`meQrcode${index}`);
          var width = shareContent.offsetWidth;
          var height = shareContent.offsetHeight;
          var canvas = document.createElement("canvas");
          var scale = 5; //这里为了下载出更清晰的图片，值越大越清晰

          canvas.width = width * scale;
          canvas.height = height * scale;
          canvas.getContext("2d").scale(scale, scale);
          var opts = {
            scale: 1, //不管上面的scale是多少倍，这里只能取1，否则会显示不完全
            canvas: canvas,
            logging: true,
            width: width,
            height: height,
          };
          // DOM更新了
          html2canvas(shareContent, opts).then(async function(canvas) {
            let saveUrl = await canvas.toDataURL("image/png");
            that.QRCodeURL.push({ qr_code: saveUrl, title: item.label });
            if (that.QRCodeURL.length === that.tableData.length) {
              that.batchExportQRCode(that.QRCodeURL, that.zipNmae);
              that.confirmLoading = false;
            }
          });
        });
        // DOM更新了
      });

      // var shareContent = document.getElementById();
    },
  },
};
</script>

<style lang="less" scoped>
.code {
  padding: 10px 10px 0 10px;
  border: 1px solid #000;
}
.labelBox {
  text-align: center;
  font-size: 12px;
  margin: 5px 0;
}
</style>
